<template>
  <view class="pet-container">
    <!-- 顶部用户信息 -->
    <view class="user-info">
      <view class="user-avatar-container">
        <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
      </view>
      <view class="user-name">
        <text>{{ userInfo.name }}</text>
      </view>
      <view class="user-location">
        <text class="location-icon">📍</text>
        <text>{{ userInfo.location }}</text>
      </view>
      <view class="search-icon">
        <u-icon name="search" size="28"></u-icon>
      </view>
    </view>

    <!-- 商品管理入口卡片 -->
    <view class="product-manage-card" @click="navigateToProductManage">
      <view class="product-manage-info">
        <view class="product-manage-title">商品管理</view>
        <view class="product-manage-subtitle">添加、编辑和管理您的商品</view>
      </view>
      <view class="product-manage-icon">
        <u-icon name="arrow-right" size="28" color="#FFFFFF"></u-icon>
      </view>
    </view>
    
    <!-- 宠物服务助手卡片 -->
    <view class="service-card">
      <view class="service-info">
        <view class="service-title">您的宠物</view>
        <view class="service-subtitle">服务助手</view>
        <view class="contact-btn" @click="contactUs">
          <text>联系我们</text>
        </view>
      </view>
      <view class="service-image">
        <image src="/static/images/pet/pet-assistant.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 我们的服务 -->
    <view class="section-container">
      <view class="section-header">
        <text class="section-title">我们的服务</text>
        <text class="view-all" @click="viewAllServices">查看全部</text>
      </view>
      <view class="service-grid">
        <view class="service-item" v-for="(item, index) in services" :key="index" @click="navigateToService(item)">
          <view class="service-icon">
            <image :src="item.icon" mode="aspectFit"></image>
          </view>
          <view class="service-name">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <!-- 我的宠物 -->
    <view class="section-container">
      <view class="section-header">
        <text class="section-title">我的宠物</text>
        <text class="view-all" @click="viewAllPets">查看全部</text>
      </view>
      <view class="pet-list">
        <view class="pet-item" v-for="(pet, index) in pets" :key="index" @click="viewPetDetail(pet)">
          <view class="pet-image">
            <image :src="pet.image" mode="aspectFill"></image>
          </view>
          <view class="pet-info">
            <view class="pet-name">{{ pet.name }}</view>
            <view class="pet-details">
              <text class="pet-gender">{{ pet.gender }}</text>
              <text class="pet-age">{{ pet.age }}</text>
              <text class="pet-weight">{{ pet.weight }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import modal from '@/plugins/modal';
import { getPetList, getServiceList } from '@/api/pet/index';
import store from '@/store';

// 用户信息
const userInfo = ref({
  avatar: store.state.user.avatar || '/static/images/profile.jpg',
  name: store.state.user.name || '熙宸',
  location: '四川成都'
});

// 服务列表
const services = ref([]);

// 宠物列表
const pets = ref([]);

// 获取服务列表
const fetchServices = async () => {
  try {
    const res = await getServiceList();
    if (res.code === 200 && res.data && res.data.services) {
      services.value = res.data.services.slice(0, 4); // 只显示前4个服务
    }
  } catch (error) {
    console.error('获取服务列表失败', error);
    // 使用默认数据
    services.value = [
      {
        id: 1,
        name: '商品管理',
        icon: '/static/images/pet/service-grooming.png',
        path: '/pages/pet/product-manage'
      },
      {
        id: 2,
        name: '到店美容',
        icon: '/static/images/pet/service-salon.png',
        path: '/pages/pet/service/salon'
      },
      {
        id: 3,
        name: '宠物寄养',
        icon: '/static/images/pet/service-boarding.png',
        path: '/pages/pet/service/boarding'
      },
      {
        id: 4,
        name: '宠物托管',
        icon: '/static/images/pet/service-daycare.png',
        path: '/pages/pet/service/daycare'
      }
    ];
  }
};

// 获取宠物列表
const fetchPets = async () => {
  try {
    const res = await getPetList();
    if (res.code === 200 && res.data) {
      pets.value = res.data;
    }
  } catch (error) {
    console.error('获取宠物列表失败', error);
    // 使用默认数据
    pets.value = [
      {
        id: 1,
        name: '小橘',
        image: '/static/images/pet/cat.png',
        gender: '公',
        age: '1年3个月',
        weight: '2.5公斤'
      },
      {
        id: 2,
        name: '豆豆',
        image: '/static/images/pet/dog.png',
        gender: '公',
        age: '1岁10个月',
        weight: '1.8公斤'
      }
    ];
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchServices();
  fetchPets();
});

// 联系我们
function contactUs() {
  uni.makePhoneCall({
    phoneNumber: '400-123-4567',
    fail: () => {
      modal.msg('拨打电话失败');
    }
  });
}

// 查看所有服务
function viewAllServices() {
  uni.navigateTo({
    url: '/pages/pet/service/list'
  });
}

// 查看所有宠物
function viewAllPets() {
  uni.navigateTo({
    url: '/pages/pet/my-pets'
  });
}

// 导航到服务详情
function navigateToService(service) {
  uni.navigateTo({
    url: service.path
  });
}

// 导航到商品管理页面
function navigateToProductManage() {
  uni.navigateTo({
    url: '/pages/pet/product-manage'
  });
}

// 查看宠物详情
function viewPetDetail(pet) {
  uni.navigateTo({
    url: `/pages/pet/pet-detail?id=${pet.id}`
  });
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.pet-container {
  padding-bottom: 30rpx;
}

// 商品管理卡片样式
.product-manage-card {
  margin: 0 30rpx 20rpx;
  height: 120rpx;
  background-color: #FF6B6B;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  overflow: hidden;
  position: relative;
  
  .product-manage-info {
    flex: 1;
    color: #FFFFFF;
    
    .product-manage-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 6rpx;
    }
    
    .product-manage-subtitle {
      font-size: 24rpx;
      opacity: 0.8;
    }
  }
  
  .product-manage-icon {
    margin-left: 20rpx;
  }
}

// 用户信息样式
.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;
  
  .user-avatar-container {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20rpx;
  }
  
  .user-avatar {
    width: 100%;
    height: 100%;
  }
  
  .user-name {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 20rpx;
  }
  
  .user-location {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
    
    .location-icon {
      margin-right: 6rpx;
    }
  }
  
  .search-icon {
    position: absolute;
    right: 30rpx;
  }
}

// 服务卡片样式
.service-card {
  margin: 0 30rpx;
  height: 180rpx;
  background-color: #0d3e4f;
  border-radius: 20rpx;
  display: flex;
  overflow: hidden;
  position: relative;
  
  .service-info {
    flex: 1;
    padding: 30rpx;
    color: #ffffff;
    
    .service-title {
      font-size: 36rpx;
      font-weight: bold;
    }
    
    .service-subtitle {
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }
    
    .contact-btn {
      display: inline-block;
      background-color: #ffd84d;
      color: #333;
      font-size: 28rpx;
      padding: 10rpx 30rpx;
      border-radius: 30rpx;
    }
  }
  
  .service-image {
    width: 200rpx;
    height: 180rpx;
    position: absolute;
    right: 0;
    bottom: 0;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
}

// 部分标题样式
.section-container {
  margin: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
    }
    
    .view-all {
      font-size: 26rpx;
      color: #666;
    }
  }
}

// 服务网格样式
.service-grid {
  display: flex;
  flex-wrap: wrap;
  
  .service-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
    
    .service-icon {
      width: 100rpx;
      height: 100rpx;
      background-color: #fff5e0;
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10rpx;
      
      image {
        width: 60rpx;
        height: 60rpx;
      }
    }
    
    &:nth-child(2) .service-icon {
      background-color: #ffe0e9;
    }
    
    &:nth-child(3) .service-icon {
      background-color: #e0ffe8;
    }
    
    &:nth-child(4) .service-icon {
      background-color: #ffe9e0;
    }
    
    .service-name {
      font-size: 24rpx;
      color: #333;
    }
  }
}

// 宠物列表样式
.pet-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
  
  .pet-item {
    width: calc(50% - 20rpx);
    margin: 0 10rpx 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
    
    .pet-image {
      width: 100%;
      height: 240rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .pet-info {
      padding: 20rpx;
      
      .pet-name {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .pet-details {
        display: flex;
        font-size: 24rpx;
        color: #999;
        
        .pet-gender, .pet-age {
          margin-right: 20rpx;
        }
      }
    }
  }
}
</style>